<!-- 账号管理 -->
<template>
  <div>
    <div class="searchbox">
      <el-form :inline="true" size="small" label-width="100px">
        <el-form-item label="工号">
          <el-input size="small" placeholder="工号"></el-input>
        </el-form-item>
        <el-form-item label="职务">
          <el-input size="small" placeholder="职务"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input size="small" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 20px;">
          <el-button size="mini" type="primary">查询</el-button>
          <el-button size="mini">清除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="contentbox">
      <div style="float: left;padding-left: 20px;font-size: 15px;color: #666;padding-top: 6px;">
        委托单信息 共 <span style="color: red;">5</span> 条数据
      </div>
      <el-row style="float: right;margin-right: 20px;margin-bottom: 15px;" type="flex" justify="end">
        <el-col>
          <jt-table-column-filter tableName='accountManagement' :table-key.sync="tableKey" :header-data.sync="tableHeaderArr" :filter-column.sync="filterColumnData"></jt-table-column-filter>
          <el-button size="small" type="primary">导出</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" :key='tableKey' v-loading="loading" @selection-change="handleSelectionChange" border stripe height="460">
        <el-table-column type="selection" align="center" width="50"></el-table-column>
        <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
        <el-table-column align="center" :key='item' v-for='item in filterColumnData' :label="getTableHeaderLabel(item)" :prop="item"
          :min-width="getTableColumnWidth(item)" :fixed="getTableColumnFixed(item)" :sortable="getTableColumnSort(item)">
        </el-table-column>
      </el-table>
      <jt-easy-pagination></jt-easy-pagination>
    </div>
  </div>
</template>

<script>
  import JtTableColumnFilter from 'components/jt-table-column-filter/index'; // 导入表格列筛选组件
  import JtEasyPagination from 'components/jt-easy-pagination/index';
  import ResetUserPassword from 'module-template/reset-user-password';
  import OperateUser from 'module-template/operate-user';
  export default {
    name: 'AccountSetting',
    components: {
      'jt-table-column-filter': JtTableColumnFilter,
      'reset-user-password': ResetUserPassword,
      'operate-user': OperateUser,
      'jt-easy-pagination': JtEasyPagination
    },
    data() {
      return {
        tableData: [{
          id: "222",
          natasknameme: "等待审核",
          status: "等待审核",
          projectname: "测试",
          projectcode: "111",
          resource: "10",
          operate: "操作"
        }, {
          id: "222",
          natasknameme: "等待审核",
          status: "等待审核",
          projectname: "测试",
          projectcode: "111",
          resource: "10",
          operate: "操作"
        }, {
          id: "222",
          natasknameme: "等待审核",
          status: "等待审核",
          projectname: "测试",
          projectcode: "111",
          resource: "10",
          operate: "操作"
        }, {
          id: "222",
          natasknameme: "等待审核",
          status: "等待审核",
          projectname: "测试",
          projectcode: "111",
          resource: "10",
          operate: "操作"
        }, {
          id: "222",
          natasknameme: "等待审核",
          status: "等待审核",
          projectname: "测试",
          projectcode: "111",
          resource: "10",
          operate: "操作"
        }, {
          id: "222",
          natasknameme: "等待审核",
          status: "等待审核",
          projectname: "测试",
          projectcode: "111",
          resource: "10",
          operate: "操作"
        }, {
          id: "222",
          natasknameme: "等待审核",
          status: "等待审核",
          projectname: "测试",
          projectcode: "111",
          resource: "10",
          operate: "操作"
        }, {
          id: "222",
          natasknameme: "等待审核",
          status: "等待审核",
          projectname: "测试",
          projectcode: "111",
          resource: "10",
          operate: "操作"
        }, {
          id: "222",
          natasknameme: "等待审核",
          status: "等待审核",
          projectname: "测试",
          projectcode: "111",
          resource: "10",
          operate: "操作"
        }, {
          id: "222",
          natasknameme: "等待审核",
          status: "等待审核",
          projectname: "测试",
          projectcode: "111",
          resource: "10",
          operate: "操作"
        }],


        showUser: false, // 新建账户信息
        operateSort: 0, // 判断用户信息是新增还是编辑
        loading: false,
        tableKey: 1,
        filterColumnData: [],
        tableHeaderArr: [{
            'name': 'id',
            'alias': '工号',
            'default': true,
            'width': 160,
            'fixed': false,
            'sort': true
          },
          {
            'name': 'status',
            'alias': '部门1',
            'default': true,
            'width': 210,
            'fixed': false,
            'sort': true
          },
          {
            'name': 'resource',
            'alias': '部门2',
            'default': false,
            'width': 150,
            'fixed': false,
            'sort': true
          },
          {
            'name': 'projectname',
            'alias': '科室',
            'default': true,
            'width': 150,
            'fixed': false,
            'sort': true
          },
          {
            'name': 'projectcode',
            'alias': '职务',
            'default': true,
            'width': 150,
            'fixed': false,
            'sort': true
          },
          {
            'name': 'username',
            'alias': '用户姓名',
            'default': true,
            'width': 160,
            'fixed': false,
            'sort': true
          },
          {
            'name': 'email',
            'alias': '邮件地址',
            'default': true,
            'width': 160,
            'fixed': false,
            'sort': true
          },
          {
            'name': 'remark',
            'alias': '备注',
            'default': true,
            'width': 160,
            'fixed': false,
            'sort': true
          }
        ],
        pageSizeArr: [10, 20, 50],
        pageSize: 10,
        pageTotal: 20,
        currentPage: 1
      }
    },
    methods: {
      formatter(row, column) {
        return row.id;
      },
      // 获取表格多选的值
      handleSelectionChange(val) {
        this.sels = val;
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
      },
      // 表头展示
      getTableHeaderLabel(str) {
        return this.getTableSomeValue(str, 'alias');
      },
      // 获取表格列的宽度
      getTableColumnWidth(str) {
        return this.getTableSomeValue(str, 'width');
      },
      // 获取表格列是否是固定的
      getTableColumnFixed(str) {
        return this.getTableSomeValue(str, 'fixed');
      },
      // 获取表格列是否排序
      getTableColumnSort(str) {
        return this.getTableSomeValue(str, 'sort');
      },
      // 获取表格表头，列宽度，列固定，列排序的值
      getTableSomeValue(str, keyName) {
        for (var value of this.tableHeaderArr) {
          if (value['name'] == str) {
            return value[keyName];
          }
        }
      },
      // 新增账号信息
      addUsers(sort) {
        this.operateSort = sort;
        this.showUser = true;
      },
      // 重置密码
      resetPw() {
        this.$confirm('是否重置该账户的密码？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '重置成功!'
          });
        });
      }
    }
  }

</script>
